<script lang="ts">
import { Component, Vue } from 'vue-facing-decorator';

@Component({})
export default class AdminNav extends Vue {
  get pagePath() {
    const path = this.$route.path;
    const match = path.match(/^\/admin\/([^/]*)/);
    return (match && match[1]) || 'stats';
  }
  updatePagePath(path: string) {
    this.$router.push({ path: '/admin/' + path });
  }
}
</script>
<template>
  <el-tabs class="admin-nav" :model-value="pagePath" @update:model-value="updatePagePath">
    <el-tab-pane label="访问统计" name="stats" />
    <el-tab-pane label="评论管理" name="comments" />
    <el-tab-pane label="用户管理" name="users" />
  </el-tabs>
</template>
<style scoped>
.admin-nav {
  max-width: 1000px;
  margin: 20px auto -20px;
  padding: 0 20px;
  background-color: var(--el-bg-color-overlay);
  color: var(--el-text-color-primary);
  display: flow-root;
}
</style>
